<template>
  <div class="airline-edit-container">
    <!-- 天地图卫星底图 -->
    <tdt-map
      class="map-background"
      :center="[115.892, 28.676]"
      :zoom="13"
      :min-zoom="4"
      :max-zoom="18"
      :enable-scroll-wheel-zoom="true"
      :enable-dragging="true"
      :enable-double-click-zoom="true"
      :enable-keyboard="true"
      :control="{
        scale: false,
        zoom: true,
        mapType: false,
      }"
      @load="onMapLoad"
    >
      <!-- 影像底图 -->
      <tdt-tilelayer-tdt :url="satelliteUrl" :z-index="1"></tdt-tilelayer-tdt>
    </tdt-map>

    <!-- 阴影遮罩层 -->
    <ShadowOverlay :z-index="1" />

    <div class="model-container">
        <div class="model-content">
            <List></List>
        </div>  
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { tiandituConfig } from "@/config";
import List from '../components/list.vue'
// 导入组件
// import EditAirline from "./components/EditAirline.vue";
// import WayPoints from "./components/WayPoints.vue";
// import ImagePanel from "./components/ImagePanel.vue";
import ShadowOverlay from "@/components/ShadowOverlay.vue";

const userStore = useUserStore();

// 使用随机域名平衡负载
const randomDomain = computed(() => Math.round(Math.random() * 7));

// 影像底图URL
const satelliteUrl = computed(() => {
  const url = tiandituConfig.serviceUrl.satellite.replace(
    "{s}",
    randomDomain.value
  );
  return `${url}?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituConfig.apiKey}`;
});

// 地图加载完成回调
const onMapLoad = (map) => {
  console.log("天地图加载完成", map);
};

onMounted(() => {
  // 检查认证状态
  userStore.checkAuth();
});
</script>

<style lang="scss" scoped>
.airline-edit-container {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;

  .model-container{
    width: 100vw;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    display: flex;
    overflow-y: auto;
    padding: 147px 30px 0 30px;
    z-index: 10;
    .model-content{
      flex: 1;
    }
  }

  /* 左侧面板 */
  .left-panel {
    position: absolute;
    left: 31px;
    top: 147px;
    z-index: 10;
    width: 510px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideRight 0.8s ease-out;
  }

  /* 右侧面板 */
  .right-panel {
    position: absolute;
    right: 31px;
    top: 147px;
    z-index: 10;
    width: 510px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideLeft 0.8s ease-out;
  }

  /* 底部面板 */
  .bottom-panel {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 10;
    width: 530px;
    height: 298px;
    animation: slideUp 0.8s ease-out;
  }

  /* 地图背景 */
  .map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;

    :deep(.tdt-map-container) {
      width: 100% !important;
      height: 100% !important;
    }

    :deep(.BMap_mask) {
      pointer-events: none !important;
    }

    :deep(.anchorBL) {
      display: none !important;
    }
  }

  :deep(#dv-full-screen-container) {
    position: relative;
    z-index: 2;
    pointer-events: none;
    min-height: 100vh;
    height: auto !important;
  }
}

// 动画效果
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>